<template>
	<view>
		<view class="successful">
			<view>已获取</view>
			<view>
				<block v-for="(item, index) in ccieList" :key="index">
					<view>
						<text>{{ item.name }}</text>
						<image class="wth50" src="@/static/img/iscertificate.png" mode="widthFix"></image>
					</view>
				</block>
			</view>
		</view>
		<view class="isSuccessful">
			<view><view>代考取</view></view>
			<view>
				<block v-for="(item, index) in noccieList" :key="index">
					<view @click="btnExam(item.id)">
						<view>
							<text>{{ item.name }}</text>
							<text>￥{{ item.price }}</text>
						</view>
						<image class="wth50" src="@/static/img/certificate.png" mode="widthFix"></image>
					</view>
				</block>
			</view>
		</view>
		<u-modal
			v-model="show"
			:mask-close-able="true"
			:content="content"
			:show-cancel-button="true"
			confirm-text="我要报名"
			cancel-text="先去学习"
			@cancel="toLearn"
			@confirm="toTest"
		></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			content: '你是否有把握直接参加考试',
			noccieList: [],
			ccieList: [
				{
					name: '少打打打打多多多多'
				}
			],
			captchaId: ''
		};
	},
	onLoad() {
		this.getCertificate();
	},
	methods: {
		btnExam(id) {
			this.show = !this.show;
			this.captchaId = id;
		},
		toLearn() {
			uni.navigateTo({
				url: '../course/c_details'
			});
		},
		toTest() {
			console.log(this.captchaId)
			uni.navigateTo({
				url: `../upload/testRegistration?id=${this.captchaId}`
			});
		},
		getCertificate() {
			this.$u.api.getNoCertificate().then(res => {
				this.noccieList = res.data.data;
			});
			this.$u.api.getCertificate().then(res => {
				this.ccieList = res.data.data;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.successful {
	background: #05b2b5;
	padding-bottom: 30rpx;
	> view {
		&:nth-child(1) {
			font-size: 28rpx;
			font-weight: 600;
			color: #fff;
			padding-left: 48rpx;
			padding-top: 42rpx;
		}
		&:nth-child(2) {
			padding: 0 30rpx;
			> view {
				margin: 25rpx auto;
				background: #0ac8cb;
				border-radius: 20rpx;
				display: flex;
				padding: 0 50rpx;
				align-items: center;
				justify-content: space-between;
				> text {
					font-size: 32rpx;
					color: #fff;
					&::before {
						content: '|';
						width: 10rpx;
						height: 32rpx;
						background: #fff;
						margin-right: 16rpx;
					}
				}
			}
		}
	}
}
.isSuccessful {
	> view {
		&:nth-child(1) {
			background-color: #05b2b5;
			> view {
				-webkit-border-top-left-radius: 1em;
				-webkit-border-top-right-radius: 1em;
				-webkit-border-bottom-right-radius: 0em;
				-webkit-border-bottom-left-radius: 0em;
				-moz-border-radius-topleft: 1em;
				-moz-border-radius-topright: 1em;
				-moz-border-radius-bottomright: 0em;
				-moz-border-radius-bottomleft: 0em;
				border-top-left-radius: 1em;
				border-top-right-radius: 1em;
				border-bottom-right-radius: 0em;
				border-bottom-left-radius: 0em;
				font-size: 28rpx;
				font-weight: 600;
				background: #fff;
				color: #666;
				padding: {
					left: 48rpx;
					top: 56rpx;
					bottom: 28rpx;
				}
			}
		}
		&:nth-child(2) {
			padding: 0 30rpx;
			> view {
				margin: 20rpx auto;
				border-radius: 20rpx;
				display: flex;
				padding: 0 50rpx;
				align-items: center;
				justify-content: space-between;
				background-color: #f5f5f5;
				> view {
					display: flex;
					flex-flow: column;
					> text {
						&:nth-child(1) {
							font-size: 32rpx;
							font-weight: 600;
							color: #666666;
						}
						&:nth-child(2) {
							margin-top: 12rpx;
							font-size: 30rpx;
							color: #ff8b50;
						}
					}
				}
			}
		}
	}
}
.wth50 {
	width: 160rpx;
}
</style>
